<template>
    <form @submit="submit">
        <button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
            <template v-if="formData.avatar">
                <NetImage class="avatar" :src="formData.avatar"></NetImage>
            </template>
            <template v-else>
                <image class='avatar' mode='widthFix' src="@/assets/images/default-avatar.png" /> 
            </template>
        </button>

        <input class="input" type="nickname" v-model="formData.nickname" name="nickname" placeholder="请填写昵称"/>

        <view class="p-l-r m-t-60">
            <nut-button type="primary" form-type="submit" size="large" block>保存</nut-button>
        </view>
    </form>
</template>

<script lang="ts" setup>
    import { updateInfoApi } from '@/api/User';
    import { useUserStore } from '@/stores/user';
    import NetImage from '@/components/NetImage.vue';
    import { getOpenUserInfo, hideLoading, navigateBack, redirectTo, showLoading, showModal, showToast, useRouter } from '@/utils/framework';
        import { ref } from 'vue';
import { uploadIconApi } from '@/api/Upload';
    
    const router = useRouter()
    const redirect = router.params.redirect || ''

    
    const userStore = useUserStore()

    const formData = ref({
        avatar : userStore.avatar,
        nickname : userStore.nickname
    })



    async function onChooseAvatar(e) {console.log(e)
        showLoading()
        //avatar.value = e.detail.avatarUrl
        const r = await uploadIconApi(e.detail.avatarUrl)
        hideLoading()
        if(r.success) {
            formData.value.avatar = r.data
        }else {
            showToast('上传失败')
        }


    }


    async function submit(e) {
        formData.value.nickname = e.detail.value.nickname



        if(!formData.value.avatar) {
            showToast('请选择头像')
            return
        }

        if(!formData.value.nickname) {
            showToast('请填写昵称')
            return
        }

        showLoading()


        const r = await updateInfoApi(formData.value)
        hideLoading()
        if(r.success) {
            userStore.avatar = formData.value.avatar
            userStore.nickname = formData.value.nickname
            showToast('保存成功')
        }else {
            showModal('保存失败')
            return
        }

        if(redirect) {
            redirectTo(decodeURIComponent(redirect))
        }else {
            navigateBack()
        }

        
    }

    function aliGetUserInfo() {
        getOpenUserInfo({
            async success (res) {
                let userInfo = JSON.parse(res.response).response
                const r = await updateInfoApi({nickname : userInfo.nickName, avatar : userInfo.avatar})
                if(r.success) {
                    userStore.nickname = userInfo.nickName
                    userStore.avatar = userInfo.avatar
                    showToast('保存成功')
                }else {
                    showModal('保存失败')
                    return
                }

                if(redirect) {
                    redirectTo(decodeURIComponent(redirect))
                }else {
                    navigateBack()
                }
            },
            fail: (err) => {
                console.log(err)
            }
        });
    }
</script>

<style lang="scss" src="./index.scss"></style>